<template>
  <v-chart :options="orgOptions" autoresize ref="map"></v-chart>
</template>
<script>
// let publicPath = process.env.BASE_URL;
// let geoJson = require(publicPath + 'geoJson/100000.json');

export default {
  name: "MapPanel",
  props: {},

  components: {},
  async mounted() {
    //  console.log(this.placeData)
    // console.log(this.toolTipData)
    // let max = 480,
    //     min = 9; // todo
    // let maxSize4Pin = 100,
    //     minSize4Pin = 20;

    let result = await this.axios
      .get("http://localhost:10086/geoJson/" + this.adcode + ".json")
      .catch(e => console.log(e));
    this.$echarts.registerMap(this.mapName, result.data); //注册地图
    let geoCoordMap = this.geoCoordMap;
    let convertData = function(data) {
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    };
    var _this = this;
    this.orgOptions = {
      tooltip: {
        padding: 0,
        enterable: true,
        transitionDuration: 1,
        textStyle: {
          color: "#000",
          decoration: "none"
        },
        // position: function (point, params, dom, rect, size) {
        //   return [point[0], point[1]];
        // },
        formatter: function(params) {
          // console.log(params)
          let tipHtml = "";
          tipHtml =
            '<div style="width:280px;height:180px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' +
            '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' +
            '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' +
            "</i>" +
            '<span style="margin-left:10px;color:#fff;font-size:16px;">' +
            params.name +
            "</span>" +
            "</div>" +
            '<div style="padding:20px">' +
            '<p style="color:#fff;font-size:12px;">' +
            '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
            "</i>" +
            "单位总数：" +
            '<span style="color:#11ee7d;margin:0 6px;">' +
            _this.toolTipData.length +
            "</span>" +
            "个" +
            "</p>" +
            '<p style="color:#fff;font-size:12px;">' +
            '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
            "</i>" +
            "总人数：" +
            '<span style="color:#f48225;margin:0 6px;">' +
            _this.toolTipData.length +
            "</span>" +
            "个" +
            "</p>" +
            '<p style="color:#fff;font-size:12px;">' +
            '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
            "</i>" +
            "总人数：" +
            '<span style="color:#f4e925;margin:0 6px;">' +
            _this.toolTipData.length +
            "</span>" +
            "个" +
            "</p>" +
            '<p style="color:#fff;font-size:12px;">' +
            '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
            "</i>" +
            "总人数：" +
            '<span style="color:#25f4f2;margin:0 6px;">' +
            _this.toolTipData.length +
            "</span>" +
            "个" +
            "</p>" +
            "</div>" +
            "</div>";
          setTimeout(function() {
            _this.tooltipCharts(params.name);
          }, 10);
          return tipHtml;
        }
      },

      visualMap: {
        show: true,
        min: 0,
        max: 200,
        left: "10%",
        top: "bottom",
        calculable: true,
        seriesIndex: [1],
        inRange: {
          color: ["#04387b", "#467bc0"] // 蓝绿
        }
      },
      geo: {
        show: true,
        map: this.mapName,
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        roam: false,
        itemStyle: {
          normal: {
            areaColor: "#023677",
            borderColor: "#1180c7"
          },
          emphasis: {
            areaColor: "#4499d0"
          }
        }
      },
      series: [
        {
          name: "散点",
          type: "scatter",
          coordinateSystem: "geo",
          data: convertData(this.placeData),
          symbolSize: function(val) {
            return val[2] / 10;
          },
          label: {
            normal: {
              formatter: "{b}",
              position: "right",
              show: true
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: "#fff"
            }
          }
        },
        {
          type: "map",
          map: this.mapName,
          geoIndex: 0,
          aspectScale: 0.75, //长宽比
          showLegendSymbol: false, // 存在legend时显示
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: false,
              textStyle: {
                color: "#fff"
              }
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#031525",
              borderColor: "#3B5077"
            },
            emphasis: {
              areaColor: "#2B91B7"
            }
          },
          animation: false,
          data: this.placeData
        },
        {
          name: "点",
          type: "scatter",
          coordinateSystem: "geo",
          zlevel: 6
        },
        {
          name: "Top 5",
          type: "effectScatter",
          coordinateSystem: "geo",
          data: convertData(
            this.placeData
              .sort(function(a, b) {
                return b.value - a.value;
              })
              .slice(0, 10)
          ),
          symbolSize: function(val) {
            return val[2] / 10;
          },
          showEffectOn: "render",
          rippleEffect: {
            brushType: "stroke"
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: "{b}",
              position: "left",
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: "yellow",
              shadowBlur: 10,
              shadowColor: "yellow"
            }
          },
          zlevel: 1
        }
      ]
    };
  },
  computed: {},

  methods: {
    tooltipCharts(params, name) {
      console.log(params);
      console.log(name);
    }
  },

  data() {
    return {
      adcode: "440000", //默认中国地图行政编码
      mapName: "广东省", //地图的名称
      dataJson: {},
      orgOptions: {},
      geoCoordMap: {},
      placeData: [
        { name: "北京", value: 199 },
        { name: "天津", value: 42 },
        { name: "河北", value: 102 },
        { name: "山西", value: 81 },
        { name: "内蒙古", value: 47 },
        { name: "辽宁", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 123 },
        { name: "上海", value: 24 },
        { name: "江苏", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 180 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 }
      ],
      toolTipData: [
        {
          name: "北京",
          value: [
            { name: "科技人才总数", value: 95 },
            { name: "理科", value: 82 }
          ]
        },
        {
          name: "天津",
          value: [
            { name: "文科", value: 22 },
            { name: "理科", value: 20 }
          ]
        },
        {
          name: "河北",
          value: [
            { name: "文科", value: 60 },
            { name: "理科", value: 42 }
          ]
        },
        {
          name: "山西",
          value: [
            { name: "文科", value: 40 },
            { name: "理科", value: 41 }
          ]
        },
        {
          name: "内蒙古",
          value: [
            { name: "文科", value: 23 },
            { name: "理科", value: 24 }
          ]
        },
        {
          name: "辽宁",
          value: [
            { name: "文科", value: 39 },
            { name: "理科", value: 28 }
          ]
        },
        {
          name: "吉林",
          value: [
            { name: "文科", value: 41 },
            { name: "理科", value: 41 }
          ]
        },
        {
          name: "黑龙江",
          value: [
            { name: "文科", value: 35 },
            { name: "理科", value: 31 }
          ]
        },
        {
          name: "上海",
          value: [
            { name: "文科", value: 12 },
            { name: "理科", value: 12 }
          ]
        },
        {
          name: "江苏",
          value: [
            { name: "文科", value: 47 },
            { name: "理科", value: 45 }
          ]
        },
        {
          name: "浙江",
          value: [
            { name: "文科", value: 57 },
            { name: "理科", value: 57 }
          ]
        },
        {
          name: "安徽",
          value: [
            { name: "文科", value: 57 },
            { name: "理科", value: 52 }
          ]
        },
        {
          name: "福建",
          value: [
            { name: "文科", value: 59 },
            { name: "理科", value: 57 }
          ]
        },
        {
          name: "江西",
          value: [
            { name: "文科", value: 49 },
            { name: "理科", value: 42 }
          ]
        },
        {
          name: "山东",
          value: [
            { name: "文科", value: 67 },
            { name: "理科", value: 52 }
          ]
        },
        {
          name: "河南",
          value: [
            { name: "文科", value: 69 },
            { name: "理科", value: 68 }
          ]
        },
        {
          name: "湖北",
          value: [
            { name: "文科", value: 60 },
            { name: "理科", value: 56 }
          ]
        },
        {
          name: "湖南",
          value: [
            { name: "文科", value: 62 },
            { name: "理科", value: 52 }
          ]
        },
        {
          name: "重庆",
          value: [
            { name: "文科", value: 47 },
            { name: "理科", value: 44 }
          ]
        },
        {
          name: "四川",
          value: [
            { name: "文科", value: 65 },
            { name: "理科", value: 60 }
          ]
        },
        {
          name: "贵州",
          value: [
            { name: "文科", value: 32 },
            { name: "理科", value: 30 }
          ]
        },
        {
          name: "云南",
          value: [
            { name: "文科", value: 42 },
            { name: "理科", value: 41 }
          ]
        },
        {
          name: "西藏",
          value: [
            { name: "文科", value: 5 },
            { name: "理科", value: 4 }
          ]
        },
        {
          name: "陕西",
          value: [
            { name: "文科", value: 38 },
            { name: "理科", value: 42 }
          ]
        },
        {
          name: "甘肃",
          value: [
            { name: "文科", value: 28 },
            { name: "理科", value: 28 }
          ]
        },
        {
          name: "青海",
          value: [
            { name: "文科", value: 5 },
            { name: "理科", value: 5 }
          ]
        },
        {
          name: "宁夏",
          value: [
            { name: "文科", value: 10 },
            { name: "理科", value: 8 }
          ]
        },
        {
          name: "新疆",
          value: [
            { name: "文科", value: 36 },
            { name: "理科", value: 31 }
          ]
        },
        {
          name: "广东",
          value: [
            { name: "文科", value: 63 },
            { name: "理科", value: 60 }
          ]
        },
        {
          name: "广西",
          value: [
            { name: "文科", value: 29 },
            { name: "理科", value: 30 }
          ]
        },
        {
          name: "海南",
          value: [
            { name: "文科", value: 8 },
            { name: "理科", value: 6 }
          ]
        }
      ]
    };
  }
};
</script>
<style scoped></style>
